<template>
	<comRoot>
		<template #page>
			<view class="shipping-record-page relative">
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
				
				<comDetailNavigateBack title="开箱记录" />
				
				<comScrollTab v-model="cuurentIndex" :list="tabAreaList">
					<scroll-view scroll-y class="scroll-y" @scrolltolower="scrolltolower" :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 48rpx)' }">
						<view v-if="resLists && resLists.length">
							<comOpenBoxRecord @share="share" :recordType="tabAreaList[cuurentIndex].type" :list="resLists"/>
							
							<view style="padding-bottom: 26rpx;">
								<comLoadMore class="loadmore-txt" :loading="loading" :showLoadendTxt="showLoadendTxt"></comLoadMore>
							</view>
						</view>
						<comEmptyData v-else-if="resLists && !resLists.length && !loading"></comEmptyData>
						<comLoading style="width: 100%; height: 100%" v-if="loading"></comLoading>
					</scroll-view>
				</comScrollTab>
				<!-- 小程序隐私保护指引设置 -->
				<!-- #ifdef MP-WEIXIN -->
				<comPrivacyPopup senceOrign="sceneNull" style="z-index: 100000" title="用户隐私保护提示" popupOfHeight="482rpx"></comPrivacyPopup>
				<!-- #endif -->
			</view>
		</template>
	</comRoot>
</template>

<script>
	import { getRewardBoxLogApi } from '@/setupproject/INTERFACE.js';
	import store from '@/store';
	import pager from '@/inmixed/paging.mixin.js';
	import { setAsyncFunWait, setAuthPhoneUsers } from '@/setupproject/TOOLS_FUN';
	export default {
		name: 'openBaoBoxRecordPage',
		mixins: [pager],
		data() {
			return {
				cuurentIndex: 0,
				isLoadEnd: false,
				loading: true,
				tabAreaList: [
					{ type: 0, text: '全部' },
					{ type: 1, text: 'SP' },
					{ type: 2, text: 'A' },
					{ type: 3, text: 'B' },
					{ type: 4, text: 'C' },
				],
				
				shareInfo: {},
			};
		},
		computed: {
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
			token() {
				return store.getters.token;
			},
			userInfo() {
				return this.$store.getters.userInfo;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		async onLoad(option) {
			this.cuurentIndex = Number(option.index || 0);
		},
		watch: {
			cuurentIndex(v) {
				this.resLists = [];
				/* paging.mixin.js Methods */
				this.pagingInitFun();
				this.resListsGetFun();
			}
		},
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.shareInfo.title || '恭喜发财,大吉大利',
					path: `/secondary/shareEnvelopePage/shareEnvelopePage?id=${this.shareInfo.red_packet_id}`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/redEnvelope/red-envelope-share.png`,
					content: '',
					desc: ''
				});
			}
			uni.showLoading({
				title: '',
				mask: false
			});
			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const {
						shareObjData
					} = this.$store.getters;
					resolve(shareObjData)
					uni.hideLoading();
				}, 200);
			});
		
			return {
				promise
			};
		},
		methods: {
			async share(item) {
				await (this.shareInfo = item);
				
				await this.$store.commit('SHARE_INFO_SET_FUN', {
					title: this.shareInfo.title || '恭喜发财,大吉大利',
					path: `/secondary/shareEnvelopePage/shareEnvelopePage?id=${this.shareInfo.red_packet_id}`,
					imageUrl: `${this.commonConfigs.domainFrontFileLink}/files/images/redEnvelope/red-envelope-share.png`,
					content: '',
					desc: ''
				});
			},
			
			async listsGetFun() {
				this.loading = true;
				const { data, code } = await getRewardBoxLogApi({ 
					type: this.tabAreaList[this.cuurentIndex].type, // 是	string	类型1领取记录，2发出记录
					page: this.pageInfoObj.page, 
					page_size: this.pageInfoObj.page_sizes,
				});
				
				setTimeout(() => {
					this.loading = false;
				}, 0);
				
				data.resLists = data.list;
				
				return data;
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.shipping-record-page {
		width: 100%;
		height: 100%;
		.tip-box{
			top: -8rpx;
			font-size: 22rpx;
			margin-bottom: 12rpx;
			padding-left: 26rpx;
			color: #fa4f4f;
			.shop-tip-icon{
				margin-right: 12rpx;
				width: 22rpx;
				height: 22rpx;
			}
		}
	}
</style>
